<template>
	<view>
		<!-- 加了fixed -->
		<view class="page_header">
			<view class="status-bar"></view>
			<view class="navtop">
				<image @click="back" src="/static/index/Back_icon.png" mode="widthFix" class="back_icon"></image>
				<text class="balance">订单详情</text>
				<navigator url="../../index/task_details/task-rules" class="renwu_css">任务规则</navigator>
			</view>
		</view>
		<!-- 没加fixed -->
		<view class="status-bar"></view>
		<view class="" style="height: 100rpx ;">
		</view>


		<view class="task_top clearfix">
			<view class="task_top_top ">
				<view class="task_top_box">
					<view class="task_top_title diandiandian" style="color: #7322D8;font-size: 32rpx;font-weight: bold;">
						正在审核中
					</view>
					<view class="task_top_box_bottom" style="font-size: 28rpx;color:#8E8E8E ;">
						您的任务正在审核中，请耐心等待，48小时内到账
					</view>
				</view>
			</view>
			<view class="task_top_top ">
				<view class="task_top_box">
					<view class="task_top_title diandiandian">
						任务名称任务名称任务名称
					</view>
					<view class="task_top_box_bottom">
						<view class="task_top_box_bottom_list">
							下载注册
						</view>
					</view>
				</view>
				<view class="task_top_right clearfix">
					<view class="task_top_right_bottom ">
						<text class="task_top_right_bottom_text">本次结算：</text>
						<text class="task_top_right_bottom_price">￥<text style="font-size: 28rpx;">6.80</text></text>
					</view>
				</view>
			</view>
			<view class="task_top_bottom">
				<view class="task_top_bottom_list">
					<image src="../../../static/task/bianhao4.png" style="width: 24rpx;height: 22rpx;"></image>
					<text class="task_number">数量1080</text>
				</view>
				<view class="task_top_bottom_list">
					<image src="../../../static/task/bianhao2.png" style="width: 22rpx;height: 24rpx;"></image>
					<text class="task_number">数量1080</text>
				</view>
				<view class="task_top_bottom_list">
					<image src="../../../static/task/bianhao.png" style="width: 27rpx;height: 20rpx;"></image>
					<text class="task_number">数量1080</text>
				</view>
				<view class="task_top_bottom_list">
					<image src="../../../static/task/bianhao3.png" style="width: 23rpx;height: 23rpx;"></image>
					<text class="task_number">数量1080</text>
				</view>

			</view>
			<view class="task_user">
				<view class="task_user_left">
					<image src="../../../static/dating/public.png" mode="" style="width: 80rpx;height: 80rpx;"></image>
					<view class="task_user_left1">
						<text class="task_user_left1_title">语出（d541851）</text>
						<view class="task_user_left_dis">
							<view class="task_user_left_dis_title">
								实名制
							</view>

							<image src="../../../static/task/vip_yellow.png" mode="" style="width: 124rpx;height: 28rpx;"></image>
						</view>
					</view>
				</view>
				<view class="task_user_right">
					<image src="../../../static/task/lianxi.png" mode="" style="width: 42rpx;height: 37rpx;"></image>
					<text style="font-size: 24rpx;">联系商家</text>
				</view>
			</view>
		</view>
		<view class="task_content">
			<view class="task_content_box">
				<view class="task_content_box_top">任务步骤</view>
				<view class="task_content_box_lr">
					<view class="task_content_box_left">
						<image src="/static/task/shuxian.png" mode="widthFix" style="width: 40rpx;height: 962rpx;"></image>
					</view>
					<view class="task_content_box_right">
						<view class="task_content_box_right_list">
							<view class="task_content_box_right_list_top">
								步骤一（图文说明）

							</view>
							<view class="task_content_box_right_list_txt">
								6月15日下午17时30时,首次载人交会对接任务的航天员与记者见面会在酒泉驻地问天阁会见厅举行。神舟九号航天员乘组三名成员正式亮相,并回答中外记者提问。 三位航天员工。
							</view>
							<image src="../../../static/dating/public.png" mode="" class="task_content_box_right_list_pic"></image>
						</view>
						<view class="task_content_box_right_list">
							<view class="task_content_box_right_list_top">
								步骤二（图文说明）

							</view>
							<view class="task_content_box_right_list_txt">
								6月15日下午17时30时,首次载人交会对接任务的航天员与记者见面会在酒泉驻地问天阁会见厅举行。神舟九号航天员乘组三名成员正式亮相,并回答中外记者提问。 三位航天员工。
							</view>
							<image src="../../../static/dating/public.png" mode="" class="task_content_box_right_list_pic"></image>
						</view>
						<view class="task_content_box_right_list">
							<view class="task_content_box_right_list_top">
								步骤三（提交截图）
							</view>
							<view class="task_content_box_right_list_txt">
								6月15日下午17时30时,首次载人交会对接任务的航天员与记者见面会在酒泉驻地问天阁会见厅举行。神舟九号航天员乘组三名成员正式亮相,并回答中外记者提问。 三位航天员工。
							</view>
							<view class="" style="display: flex;justify-content: space-between;padding: 0 50rpx;">

								<image src="/static/dating/public.png" mode="" class="pic_task_content_box_right_list"></image>
								<image src="/static/task/undown.png" mode="" class="pic_task_content_box_right_list"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="input_box1">
				<text class="input_box_title">提交数据<text>（请在下方填写任务数据）</text></text>
				<input class="uni-input" v-model="phone" type="number" placeholder="手机号" />
			</view>
			<view class="input_box">
				<view class="input_box_top close_padd" style="color: black;">
					订单信息
				</view>
				<view class="input_box_top">
					·订单编号：10108210
				</view>
				<view class="input_box_top">
					·领取时间：2020-04-21 10:30
				</view>
				<view class="input_box_top">
					·提交时间：2020-04-21 10:30
				</view>
			</view>
			<view class="lingqu_renwu">
				<view class="lingqu_renwu_left" @click="open">
					继续做任务
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				phone: ""
			}
		},
		methods: {
			open(){
				uni.switchTab({
					url:"../../daTing/daTing"
				})
			},
			back() {
				uni.navigateBack({})
			},
		}
	}
</script>

<style lang="less">
	page {
		box-sizing: border-box;
	}

	.task_top {
		width: 750rpx;
		padding: 28rpx 35rpx 0 35rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #E5E5E5;
		padding-bottom: 20rpx;
	}

	.task_top_top {
		display: flex;
		justify-content: space-between;
		height: 171rpx;
		border-bottom: 1rpx solid #E5E5E5;
	}

	.task_top_title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-bottom: 19rpx;
		box-sizing: border-box;
	}

	.task_top_box {
		flex: 6;
		position: relative;
	}

	.task_top_right {
		flex: 4;
		position: relative;
	}

	.task_top_box_bottom_list {
		width: 100rpx;
		height: 30rpx;
		background: rgba(115, 34, 216, 1);
		opacity: 0.3;
		border-radius: 10rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 30rpx;
	}

	.renwu_css {
		width: 142rpx;
		position: absolute;
		right: 35rpx;
		font-size: 32rpx;
		background: linear-gradient(45deg, rgba(212, 32, 238, 1) 0%, rgba(115, 34, 216, 1) 100%);
		-webkit-background-clip: text;
		color: transparent;
	}

	.task_top_right_pingzheng {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-left: 11rpx;
	}

	.task_top_right_top {
		position: absolute;
		right: 0;
		top: 12rpx;
	}

	.task_top_right_bottom {
		position: absolute;
		top: 110rpx;
		display: flex;
		font-size: 24rpx;
		right: 0;
		align-items: center;
	}

	.task_top_right_bottom_text {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(115, 34, 216, 1);
	}

	.task_top_right_bottom_price {
		color: #FF3B30;
		font-size: 28rpx;
	}

	.task_top_bottom {
		width: 100%;
		padding-top: 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.task_number {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		margin-left: 10rpx;
	}

	.task_top_bottom_list {
		display: flex;
		align-items: center;
	}

	.task_user {
		padding-top: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.task_user_left {
		flex: 8;
		display: flex;

	}

	.task_user_right {
		flex: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #8E8E8E;
	}

	.task_user_left_dis {
		display: flex;
	}

	.task_user_left_dis_title {
		width: 80rpx;
		height: 28rpx;
		background: rgba(115, 34, 216, 1);
		border-radius: 14rpx;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(240, 240, 240, 1);
		text-align: center;
		line-height: 28rpx;
		margin-right: 14rpx;
	}

	.task_user_left1 {
		margin-left: 20rpx;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: space-between;
	}

	.task_user_left1_title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.task_content {
		width: 750rpx;
		background-color: #EFEFF4;
		display: flex;
		justify-content: center;
		padding-top: 20rpx;
		box-sizing: border-box;
		flex-wrap: wrap;
	}

	.task_content_box {
		width: 680rpx;
		height: 1450rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		padding-left: 20rpx;
		padding-right: 36rpx;
		box-sizing: border-box;
		padding-top: 20rpx;
		margin-bottom: 20rpx;

		.task_content_box_top {
			font-size: 35rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			margin-bottom: 20rpx;
		}

		.task_content_box_lr {
			display: flex;

			.task_content_box_right {
				margin-left: 13rpx;
			}

		}
	}

	.task_content_box_right_list {
		height: 420rpx;
		margin-bottom: 24rpx;

		.task_content_box_right_list_top {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}

		.task_content_box_right_list_txt {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			height: 150rpx;
			margin-top: 15rpx;
		}

		.task_content_box_right_list_pic {
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
			margin-top: 21rpx;
			margin-left: 190rpx;
		}
	}

	.pic_task_content_box_right_list {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		margin-top: 21rpx;
	}

	.input_box {
		width: 680rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		padding-top: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		padding-bottom: 20rpx;

		.input_box_title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}

		.uni-input {
			width: 640rpx;
			height: 50rpx;
			background: rgba(229, 229, 229, 1);
			border-radius: 10rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			padding-left: 20rpx;
			box-sizing: border-box;
			margin-top: 10rpx;
		}
	}

	.lingqu_renwu {
		width: 680rpx;
		height: 90rpx;
		display: flex;
		margin-bottom: 20rpx;
	}

	.danjishi {
		display: flex;
		width: 680rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFangSCRegular;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-bottom: 30rpx;
	}

	.lingqu_renwu {
		display: flex;
		justify-content: space-between;

		.lingqu_renwu_left {
			width: 750rpx;
			height: 90rpx;
			background:#7322D8;
			box-shadow: 0px 0px 18rpx 2rpx rgba(115, 34, 216, 0.1);
			border-radius: 20rpx;
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: white;
			text-align: center;
			line-height: 90rpx;
		}
	}

	.popup_juzhong {
		width: 650rpx;
		height: 357rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 30rpx;
		padding-top: 46rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;

		.popup_juzhong_title {
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}

	.popup_juzhong_lr {
		display: flex;
		justify-content: space-between;
		margin-top: 150rpx;
	}

	.popup_juzhong_left {
		width: 260rpx;
		height: 90rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 18rpx 2rpx rgba(115, 34, 216, 0.2);
		border-radius: 20rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 90rpx;
	}

	.popup_juzhong_right {
		width: 260rpx;
		height: 90rpx;
		background: rgba(115, 34, 216, 1);
		box-shadow: 0px 0px 18rpx 2rpx rgba(115, 34, 216, 0.3);
		border-radius: 20rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 90rpx;
	}

	.input_box_top {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		line-height: 50rpx;
		padding-left: 40rpx;
	}

	.input_box1 {
		width: 680rpx;
		height: 158rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		padding-top: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;

		.input_box_title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}

		.uni-input {
			width: 640rpx;
			height: 50rpx;
			background: rgba(229, 229, 229, 1);
			border-radius: 10rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			padding-left: 20rpx;
			box-sizing: border-box;
			margin-top: 10rpx;
		}
	}

	.close_padd {
		padding-left: 0;
	}

	.renwupic {
		width: 200rpx;
		height: 200rpx;
		background: rgba(115, 34, 216, 1);
		border-radius: 20rpx;
		margin: 0 auto;

		image {
			width: 200rpx;
			height: 200rpx;
			margin: 0 auto;
			display: inline-block;
			border-radius: 20rpx;
		}
	}
</style>
